import React from 'react';
import { Card, Button, Typography } from 'antd';
import { useNavigate } from 'react-router-dom';
import ChatAssistant from '../ChatAssistant/ChatAssistant';
import './Home.scss';

const { Title, Text } = Typography;

const Home = () => {
  const preferences = JSON.parse(localStorage.getItem('investment_preferences'));
  const navigate = useNavigate();

  const mainFeatures = [
    { title: '股票行情', description: '查看实时股票数据和分析', icon: '📈', path: '/stock/list' },
    { title: '交易策略', description: '创建和管理您的投资策略', icon: '💡', path: '/strategy/manage' },
    { title: '资产管理', description: '查看和管理您的投资组合', icon: '💰', path: '/asset' },
    { title: '外汇市场', description: '实时外汇行情和交易', icon: '🌐', path: '/forex/spot_list' }
  ];

  if (!preferences) {
    return (
      <div className="home-welcome-container">
        <Card className="welcome-card">
          <Title level={3}>欢迎使用 Intelli Whale 智能投顾平台</Title>
          <Text>为了给您提供个性化的投资建议，请先完成风险测评问卷</Text>
          <div className="welcome-btn-wrapper">
            <Button
              type="primary"
              size="large"
              onClick={() => navigate('/user-info')}
              className="welcome-btn"
            >
              开始风险测评
            </Button>
          </div>
        </Card>
        <ChatAssistant />
      </div>
    );
  }

  return (
    <div className="dashboard-container">
      <div className="dashboard-header">
        <Title level={2} className="dashboard-title">Intelli Whale 智能投顾平台</Title>
        <Text type="secondary" className="dashboard-subtitle">您的智能投资助手</Text>
      </div>
      <div className="feature-grid">
        {mainFeatures.map((feature, i) => (
          <Card
            key={i}
            hoverable
            className="feature-card"
            onClick={() => navigate(feature.path)}
            cover={<div className="feature-icon-container"><span className="feature-icon">{feature.icon}</span></div>}
            bodyStyle={{ padding: '16px' }}
          >
            <Title level={4} className="feature-title">{feature.title}</Title>
            <Text type="secondary" className="feature-desc">{feature.description}</Text>
          </Card>
        ))}
      </div>
      <ChatAssistant />
    </div>
  );
};

export default Home;
